<template>
  <ul class="title-list">
    <li class="title-list-li" v-for="item in newsList" :key="item.id">
      <!-- query 第一种写法  字符串-->
      <!-- <RouterLink :to="`/news/detail?id=${item.id}&title=${item.title}&content=${item.content}`"> -->

      <!-- query 第二种写法  对象 -->
      <!-- detail: '/news/detail', name: 'detail', 都可以-->
      <!-- <RouterLink :to="{
        name: 'detail',
        query: item
      }"> -->

      <!-- params 第一种写法，必须要路由规则占位符，字符串写法，配置在路由规则里面，:id/:content/:title  如果是非必传 content,就是:id/:content?/:title -->
      <!-- <RouterLink :to="`/news/detail/${item.id}`"> -->
      <!-- <RouterLink :to="`/news/detail/${item.id}/${item.content}/${item.title}`"> -->

      <!-- params 第二种写法，必须要路由规则占位符，对象写法，必须搭配name属性,且参数不能是数组,但是可以通过JSON.stringify(对象)传对象 进行跳转传参 -->
      <!-- <RouterLink :to="{
        name: 'detail',
        params: item
      }"> -->


      <!-- props + defineProps  第一种写法，路由规则配置props: true + params(name, 路由规则占位符)。 -->
      <!-- <RouterLink :to="{
        name: 'detail',
        params: item
      }"> -->

      <!-- props + defineProps  第二种写法，props(route) { return route.query } + query(不需要占位符也可以)。 -->
      <RouterLink :to="{
        name: 'detail',
        query: item
      }">
        {{ item.title }}
      </RouterLink>
    </li>
  </ul>
  <div class="detail-view">
    <RouterView></RouterView>
  </div>
  <!-- 编程式导航 -->
  <button class="btn" @click="toDetail">跳转到第二条新闻详情页</button>
</template>

<script lang='ts' setup>
import { reactive } from 'vue';
import { RouterView, RouterLink, useRouter } from "vue-router"
import newsData from "@/mock/news.mock";

const newsList = reactive(newsData);

// 编程式导航
const router = useRouter();
const toDetail = () => {
  // router.push("/about")
  // router.push({
  //   path: '/news/detail',
  //   query: newsList[1]
  // })
  // router.push({
  //   name: 'detail',
  //   query: newsList[1]
  // })
  router.push({
    name: 'detail',
    params: newsList[1] //使用params传参必须在路由规则里面配置动态参数，不管是路由组件导航还是编程式导航
  })
}
</script>

<style scoped lang='scss'>
$color1: rgb(73, 73, 202);

.title-list {
  &-li {
    color: $color1;
    padding: 5px;

    a {
      text-decoration: none;
      color: $color1;

      &:hover {
        text-decoration: underline;
        color: rgb(29, 29, 197);
      }
    }
  }
}

.detail-view {
  border: 1px solid #ddd;
  padding: 10px;
  min-height: 100px;
}
</style>
